<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="统计日期:">
        <el-date-picker
          v-model="form.rangeDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :plain="type !== 'today'" @click="changeDate('today')">今天</el-button>
        <el-button type="primary" :plain="type !== 'week'" @click="changeDate('week')">近七天</el-button>
        <el-button type="primary" :plain="type !== 'month'" @click="changeDate('month')">近三十天</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="1" type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <!-- <el-button icon="el-icon-download" @click="exportExcel">导出</el-button> -->
      </el-form-item>
    </el-form>
    <div v-if="url" class="iframe">
      <iframe id="iframe" :src="url" frameborder="0" height="500px" width="100%" />
    </div>
    <div ref="echart" class="echart" />
  </div>
</template>

<script>
  import echarts from 'echarts'
  import dayjs from 'dayjs'
  import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
  import { callRecordStatistics, callRecordQuery } from '@/api'
  export default {
    name: 'personalSituation',
    data() {
      return {
        form: {
          rangeDate: []
        },
        url: '',
        type: '',
        iframeHeight: ''
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
      removeResizeListener(this.$refs.echart, this.doResize)
    },
    created() {
      this.getData()
      this.searchTable()
    },
    mounted() {
      this.form.rangeDate = [new Date(), new Date()]
    },
    methods: {
      changeDate(type) {
        this.type = type
        if (type === 'today') {
          this.form.rangeDate = [new Date(), new Date()]
          this.getData()
          this.searchTable()
        }
        if (type === 'week') {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          this.form.rangeDate = [start, end]
          this.getData()
          this.searchTable()
        }
        if (type === 'month') {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          this.form.rangeDate = [start, end]
          this.getData()
          this.searchTable()
        }
      },
      search() {
        this.getData()
        this.searchTable()
      },
      async searchTable() {
        this.url = ''
        const params = {
          corpCode: this.$store.getters.userInfo.corpCode,
          startTime: dayjs(this.form.rangeDate[0]).format('YYYY-MM-DD'),
          endTime: dayjs(this.form.rangeDate[1]).format('YYYY-MM-DD')
        }
        const res = await callRecordQuery(params)
        if (res && res.data) {
          this.url = res.data
        }
      },
      async getData() {
        const params = {
          corpCode: this.$store.getters.userInfo.corpCode,
          startTime: dayjs(this.form.rangeDate[0]).format('YYYY-MM-DD'),
          endTime: dayjs(this.form.rangeDate[1]).format('YYYY-MM-DD')
        }
        const res = await callRecordStatistics(params)
        this.chartData = res.data
        this.initChartData()
      },
      initChartData() {
        this.xData = this.chartData.map((item) => item.userName)
        this.yData1 = this.chartData.map((item) => item.answerCountTotal)
        this.yData2 = this.chartData.map((item) => item.averageTimeSpanTotal)
        this.$nextTick(() => {
          this.initChart()
        })
      },
      initChart() {
        this.chart = echarts.init(this.$refs.echart)
        this.options = {
          color: ['#8ECC75', '#EE6666', '#5470C6'],
          title: {
            show: true,
            text: (this.type === 'today' || !this.type) ? dayjs(this.form.rangeDate[0]).format('YYYY-MM-DD') + '话务数据统计' : dayjs(this.form.rangeDate[0]).format('YYYY-MM-DD') + '至' + dayjs(this.form.rangeDate[1]).format('YYYY-MM-DD') + '话务数据统计'
          },
          grid: {
            x: 50,
            x2: 50
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['接听电话总数', '平均通话时长']
          },
          xAxis: [
            {
              type: 'category',
              data: this.xData,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: { // 设置x轴的字
                show: true,
                rotate: 30,
                interval: 0 // 使x轴横坐标全部显示
                // rotate: (this.type === 'today' || !this.type) ? 30 : 0
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '电话数量',
              min: 0
            },
            {
              type: 'value',
              name: '时长/s',
              min: 0
            }
          ],
          series: [
            {
              name: '接听电话总数',
              type: 'bar',
              barWidth: 20,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              label: {
                show: true,
                position: 'top'
              },
              data: this.yData1
            },
            {
              name: '平均通话时长',
              type: 'line',
              yAxisIndex: 1,
              label: {
                show: true,
                position: 'top',
                formatter: function(data) {
                  return data.data + 's'
                }
              },
              data: this.yData2
            }
          ]
        }
        this.chart.setOption(this.options)
        addResizeListener(this.$refs.echart, this.doResize)
      },
      doResize() {
        this.chart && this.chart.resize()
      },
      exportExcel() {
        const fileName = (this.type === 'today' || !this.type) ? dayjs(this.form.rangeDate[0]).format('YY-MM-DD') + '呼叫中心统计报表' : dayjs(this.form.rangeDate[0]).format('YY-MM-DD') + '至' + dayjs(this.form.rangeDate[1]).format('YY-MM-DD') + '呼叫中心统计报表'
        console.log(fileName)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-page {
    height: auto !important;
  }
  .row-cell {
    display: flex;
    justify-content: space-around;
    .cell-l {
      width: 50%;
      padding: 0;
      text-align: center;
      border-right: 1px solid #EBEEF5;
    }
    .cell-r {
      width: 50%;
      padding: 0;
      text-align: center;
    }
  }
  .red {
    color: #F56C6C;
  }
  .echart {
    width: 100%;
    height: 400px;
    margin-top: 30px;
  }
  .iframe {
    width: 100%;
    height: 100%;
  }
</style>
